<template>
  <div class="ar-container">
    <!-- AR顶部导航 -->
    <header class="ar-header">
      <div class="header-content">
        <i class="el-icon-arrow-left" @click="goBack"></i>
        <h1>AR实景看房</h1>
        <div class="header-actions">
          <i class="el-icon-camera" @click="takePhoto"></i>
          <i class="el-icon-share" @click="shareAR"></i>
        </div>
      </div>
    </header>

    <!-- AR主视图区域 -->
    <div class="ar-main">
      <!-- AR相机视图 -->
      <div class="ar-camera-view">
        <div class="camera-placeholder" v-if="!cameraActive">
          <div class="camera-icon">
            <i class="el-icon-video-camera"></i>
          </div>
          <h3>启动AR相机</h3>
          <p>点击下方按钮开始AR实景看房体验</p>
          <el-button type="primary" @click="startAR" size="large">
            <i class="el-icon-video-play"></i>
            启动AR看房
          </el-button>
        </div>
        
        <!-- 模拟AR叠加层 -->
        <div class="ar-overlay" v-if="cameraActive">
          <!-- 房屋信息卡片 -->
          <div class="house-info-card" :class="{ active: showHouseInfo }">
            <div class="house-image">
              <img :src="currentHouse.image" :alt="currentHouse.title" />
            </div>
            <div class="house-details">
              <h3>{{ currentHouse.title }}</h3>
              <div class="house-price">{{ currentHouse.price }}万</div>
              <div class="house-specs">
                <span>{{ currentHouse.rooms }}</span>
                <span>{{ currentHouse.area }}㎡</span>
                <span>{{ currentHouse.floor }}</span>
              </div>
            </div>
            <div class="house-actions">
              <el-button size="mini" @click="viewDetails">查看详情</el-button>
              <el-button size="mini" type="primary" @click="contactAgent">联系顾问</el-button>
            </div>
          </div>

          <!-- AR标记点 -->
          <div class="ar-markers">
            <div 
              v-for="(marker, index) in arMarkers" 
              :key="index"
              class="ar-marker"
              :style="{ 
                left: marker.x + '%', 
                top: marker.y + '%',
                animationDelay: index * 0.2 + 's'
              }"
              @click="showMarkerInfo(marker)"
            >
              <div class="marker-pulse"></div>
              <div class="marker-label">{{ marker.label }}</div>
            </div>
          </div>

          <!-- 导航指示器 -->
          <div class="ar-navigator">
            <div class="nav-arrow" @click="previousHouse">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="nav-indicator">
              {{ currentIndex + 1 }} / {{ houses.length }}
            </div>
            <div class="nav-arrow" @click="nextHouse">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- AR控制面板 -->
      <div class="ar-controls" v-if="cameraActive">
        <div class="control-section">
          <h4>房屋信息</h4>
          <div class="control-item">
            <label>户型筛选</label>
            <el-select v-model="selectedType" size="mini" placeholder="选择户型">
              <el-option label="全部" value=""></el-option>
              <el-option label="一室" value="1室"></el-option>
              <el-option label="两室" value="2室"></el-option>
              <el-option label="三室" value="3室"></el-option>
              <el-option label="四室及以上" value="4室+"></el-option>
            </el-select>
          </div>
          <div class="control-item">
            <label>价格范围</label>
            <el-slider
              v-model="priceRange"
              range
              :min="100"
              :max="1000"
              :marks="{100: '100万', 500: '500万', 1000: '1000万'}"
            ></el-slider>
          </div>
        </div>

        <div class="control-section">
          <h4>AR设置</h4>
          <div class="control-item">
            <el-switch v-model="showHouseInfo" active-text="显示房屋信息"></el-switch>
          </div>
          <div class="control-item">
            <el-switch v-model="showMarkers" active-text="显示AR标记"></el-switch>
          </div>
          <div class="control-item">
            <el-button size="mini" @click="resetAR">重置视角</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- AR底部工具栏 -->
    <div class="ar-toolbar" v-if="cameraActive">
      <div class="toolbar-item" @click="toggleARInfo">
        <i class="el-icon-info"></i>
        <span>信息</span>
      </div>
      <div class="toolbar-item" @click="toggleFlash">
        <i :class="flashOn ? 'el-icon-sunny' : 'el-icon-moon'"></i>
        <span>闪光灯</span>
      </div>
      <div class="toolbar-item" @click="toggleGrid">
        <i class="el-icon-grid"></i>
        <span>网格</span>
      </div>
      <div class="toolbar-item" @click="exitAR">
        <i class="el-icon-close"></i>
        <span>退出</span>
      </div>
    </div>

    <!-- AR详情弹窗 -->
    <el-dialog
      :visible.sync="showDetailModal"
      title="房屋详情"
      width="90%"
      custom-class="ar-detail-modal"
    >
      <div class="ar-detail-content">
        <div class="detail-image">
          <el-carousel height="200px">
            <el-carousel-item v-for="(img, index) in currentHouse.images" :key="index">
              <img :src="img" :alt="currentHouse.title" class="detail-carousel-img" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="detail-info">
          <h3>{{ currentHouse.title }}</h3>
          <div class="detail-price">
            <span class="price">{{ currentHouse.price }}万</span>
            <span class="unit-price">{{ currentHouse.unitPrice }}元/㎡</span>
          </div>
          <div class="detail-specs">
            <div class="spec-item">
              <i class="el-icon-office-building"></i>
              <span>{{ currentHouse.type }}</span>
            </div>
            <div class="spec-item">
              <i class="el-icon-location"></i>
              <span>{{ currentHouse.location }}</span>
            </div>
            <div class="spec-item">
              <i class="el-icon-rank"></i>
              <span>{{ currentHouse.area }}㎡</span>
            </div>
            <div class="spec-item">
              <i class="el-icon-news"></i>
              <span>{{ currentHouse.floor }}</span>
            </div>
          </div>
          <div class="detail-features">
            <el-tag v-for="feature in currentHouse.features" :key="feature" size="mini">
              {{ feature }}
            </el-tag>
          </div>
        </div>
      </div>
      <div slot="footer" class="detail-actions">
        <el-button @click="showDetailModal = false">关闭</el-button>
        <el-button type="primary" @click="scheduleViewing">预约看房</el-button>
      </div>
    </el-dialog>

    <!-- 拍照确认弹窗 -->
    <el-dialog
      :visible.sync="showPhotoModal"
      title="AR照片"
      width="80%"
    >
      <div class="photo-preview">
        <img v-if="capturedPhoto" :src="capturedPhoto" alt="AR照片" class="captured-image" />
        <p>是否保存这张AR实景照片？</p>
      </div>
      <div slot="footer" class="photo-actions">
        <el-button @click="retakePhoto">重拍</el-button>
        <el-button type="primary" @click="savePhoto">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ARViewer',
  data() {
    return {
      cameraActive: false,
      showHouseInfo: true,
      showMarkers: true,
      flashOn: false,
      gridOn: false,
      currentIndex: 0,
      selectedType: '',
      priceRange: [100, 1000],
      showDetailModal: false,
      showPhotoModal: false,
      capturedPhoto: '',
      houses: [
        {
          id: 1,
          title: '阳光花园 精装三室',
          price: 580,
          unitPrice: 6517,
          type: '住宅',
          location: '浦东新区·张江高科',
          rooms: '3室2厅',
          area: 89,
          floor: '高层/32层',
          image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop',
          images: [
            'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop',
            'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&h=300&fit=crop',
            'https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=400&h=300&fit=crop'
          ],
          features: ['近地铁', '精装修', '满五唯一', '南北通透']
        },
        {
          id: 2,
          title: '绿地世纪城 南北通透',
          price: 420,
          unitPrice: 5833,
          type: '公寓',
          location: '徐汇区·漕河泾开发区',
          rooms: '2室1厅',
          area: 72,
          floor: '中层/18层',
          image: 'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&h=300&fit=crop',
          images: [
            'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&h=300&fit=crop',
            'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop'
          ],
          features: ['学区房', '近地铁', '满两年', '采光好']
        },
        {
          id: 3,
          title: '万科城市花园 四房豪宅',
          price: 780,
          unitPrice: 6500,
          type: '别墅',
          location: '闵行区·七宝古镇',
          rooms: '4室2厅',
          area: 120,
          floor: '低层/6层',
          image: 'https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=400&h=300&fit=crop',
          images: [
            'https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=400&h=300&fit=crop',
            'https://images.unsplash.com/photo-1560185127-6c93f25931ae?w=400&h=300&fit=crop'
          ],
          features: ['新上', '豪华装修', '带车位', '花园洋房']
        }
      ],
      arMarkers: [
        { label: '主卧', x: 25, y: 30, info: '朝南主卧，带独立卫生间' },
        { label: '客厅', x: 50, y: 45, info: '宽敞客厅，落地窗设计' },
        { label: '厨房', x: 70, y: 25, info: '开放式厨房，品牌家电' },
        { label: '阳台', x: 80, y: 60, info: '超大阳台，视野开阔' }
      ]
    }
  },
  computed: {
    currentHouse() {
      return this.houses[this.currentIndex] || this.houses[0]
    },
    filteredHouses() {
      return this.houses.filter(house => {
        const matchesType = !this.selectedType || house.rooms.includes(this.selectedType)
        const matchesPrice = house.price >= this.priceRange[0] && house.price <= this.priceRange[1]
        return matchesType && matchesPrice
      })
    }
  },
  mounted() {
    // 模拟AR初始化
    setTimeout(() => {
      this.startAR()
    }, 1000)
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    startAR() {
      this.cameraActive = true
      this.$message.success('AR相机已启动')
    },
    exitAR() {
      this.cameraActive = false
      this.$message.info('已退出AR模式')
    },
    nextHouse() {
      this.currentIndex = (this.currentIndex + 1) % this.houses.length
    },
    previousHouse() {
      this.currentIndex = (this.currentIndex - 1 + this.houses.length) % this.houses.length
    },
    viewDetails() {
      this.showDetailModal = true
    },
    contactAgent() {
      this.$message.info('正在联系置业顾问...')
    },
    scheduleViewing() {
      this.$message.success('预约成功，顾问将尽快联系您')
      this.showDetailModal = false
    },
    takePhoto() {
      // 模拟拍照功能
      this.capturedPhoto = this.currentHouse.image
      this.showPhotoModal = true
    },
    retakePhoto() {
      this.showPhotoModal = false
      this.capturedPhoto = ''
    },
    savePhoto() {
      const link = document.createElement('a')
      link.download = `ar-photo-${Date.now()}.jpg`
      link.href = this.capturedPhoto
      link.click()
      this.showPhotoModal = false
      this.$message.success('照片已保存')
    },
    shareAR() {
      this.$message.info('分享功能开发中...')
    },
    toggleARInfo() {
      this.showHouseInfo = !this.showHouseInfo
    },
    toggleFlash() {
      this.flashOn = !this.flashOn
      this.$message.info(this.flashOn ? '闪光灯已开启' : '闪光灯已关闭')
    },
    toggleGrid() {
      this.gridOn = !this.gridOn
      this.$message.info(this.gridOn ? '网格已开启' : '网格已关闭')
    },
    resetAR() {
      this.currentIndex = 0
      this.$message.success('视角已重置')
    },
    showMarkerInfo(marker) {
      this.$message.info(marker.info)
    }
  }
}
</script>

<style scoped>
.ar-container {
  min-height: 100vh;
  background: #000;
  color: white;
  display: flex;
  flex-direction: column;
}

.ar-header {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.header-content i {
  font-size: 20px;
  cursor: pointer;
  color: white;
}

.header-content h1 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 20px;
}

.ar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.ar-camera-view {
  flex: 1;
  position: relative;
  background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
}

.camera-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.camera-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.camera-icon i {
  font-size: 40px;
  color: #409EFF;
}

.camera-placeholder h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: white;
}

.camera-placeholder p {
  color: #ccc;
  margin-bottom: 20px;
}

.ar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.house-info-card {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px;
  width: 280px;
  transform: translateX(-320px);
  transition: transform 0.3s ease;
  pointer-events: all;
}

.house-info-card.active {
  transform: translateX(0);
}

.house-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.house-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.house-details h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: white;
}

.house-price {
  font-size: 20px;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 8px;
}

.house-specs {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 12px;
}

.house-actions {
  display: flex;
  gap: 8px;
}

.ar-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ar-marker {
  position: absolute;
  width: 60px;
  height: 60px;
  cursor: pointer;
  pointer-events: all;
}

.marker-pulse {
  width: 20px;
  height: 20px;
  background: #409EFF;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
}

.marker-label {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.ar-navigator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 16px;
  border-radius: 25px;
  pointer-events: all;
}

.nav-arrow {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-indicator {
  font-size: 14px;
  color: white;
}

.ar-controls {
  position: absolute;
  top: 80px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px;
  width: 200px;
  pointer-events: all;
}

.control-section {
  margin-bottom: 20px;
}

.control-section h4 {
  font-size: 14px;
  margin-bottom: 12px;
  color: white;
}

.control-item {
  margin-bottom: 12px;
}

.control-item label {
  display: block;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 4px;
}

.ar-toolbar {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
}

.toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: white;
}

.toolbar-item i {
  font-size: 24px;
  margin-bottom: 4px;
}

.toolbar-item span {
  font-size: 12px;
}

.ar-detail-modal {
  border-radius: 12px;
}

.ar-detail-content {
  max-height: 500px;
  overflow-y: auto;
}

.detail-image {
  margin-bottom: 16px;
}

.detail-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.detail-info h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
}

.detail-price {
  margin-bottom: 16px;
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b6b;
  margin-right: 12px;
}

.unit-price {
  font-size: 14px;
  color: #666;
}

.detail-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.detail-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-actions {
  text-align: center;
}

.photo-preview {
  text-align: center;
}

.captured-image {
  width: 100%;
  max-height: 300px;
  border-radius: 8px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .house-info-card {
    width: 240px;
    left: 10px;
    top: 10px;
  }
  
  .ar-controls {
    width: 160px;
    top: 70px;
    right: 10px;
  }
  
  .ar-marker {
    width: 50px;
    height: 50px;
  }
  
  .marker-label {
    font-size: 11px;
  }
}
</style>